<template>
  <div class="footer">
    <div class="hand-lianjia">
      <div class="wrapper">
        <div class="fl">
          <div class="titles" :style="`opacity:${num};background-image: url(${imgtuandui});`"></div>
          <p>
            集二手、新房、租房功能于一体，随时随地任性找房。IM匿名咨询让您放心，消息动态推送让您省心，服务承诺让您安心，数据百科锦囊让您感受贴心漫漫找房路，我们努力为您想更多。
          </p>
          <div class="download">
            <div class="hand-app">
              <a
                @click="download()"
                class="ios"
                target="_blank"
                rel="nofollow"
              ></a
              ><a @click="download()" class="android" rel="nofollow"></a>
            </div>
            <div class="erweima" style="background: none">
              <img
                style="width: 120%; height: 120%"
               src="../assets/erweima.png"
              />
            </div>
            <div class="video-img-btn" style="display: none">
              <div class="video-img-btn-bg"></div>
              <div class="video-btn-normal"></div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="fr phone"></div>
      </div>
      <div class="right">
        <div class="f-title" >
          <!-- <div class="fl"> -->
          <ul>
            <li>
              <a
                @click="download(1)" 
                rel="nofollow"
                target="_blank"
                >关于我们</a
              >
            </li>
            <li>
              <a
               @click="download(2)" 
                rel="nofollow"
                target="_blank"
                >联系我们</a
              >
            </li>
            <li>
              <a rel="nofollow" target="_blank"
              @click="download(3)" 
                >加入我们</a
              >
            </li>
            <li>
              <a @click="download(4)" 
                rel="nofollow"
                target="_blank"
                >隐私声明</a
              >
            </li>
            <li>
              <a @click="download(5)"  target="_blank"
                >网站地图</a
              >
            </li>
            <li>
              <a class="last"
             @click="download(6)" 
                rel="nofollow"
                target="_blank"
                >友情链接</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true,
      num: 0,
      imgtuandui:''
    };
  },
  methods: {
    download(sb) {
        this.num = 0
        if(sb == 1){
        this.imgtuandui = 'https://pica.zhimg.com/80/v2-b960ff72f48e40bda43314dbf94bee36_720w.jpg?source=1940ef5c'
        }else if(sb == 2){
            this.imgtuandui = 'https://pic2.zhimg.com/80/v2-ee13e212d32da1a8a949390e5113a396_720w.jpg?source=1940ef5c'
        }else if(sb == 3){
            this.imgtuandui = 'https://pic1.zhimg.com/80/v2-52f48488c5facb7b61cbda8bdc554a6e_720w.jpg?source=1940ef5c'
        }else if(sb == 4){
            this.imgtuandui = 'https://pic3.zhimg.com/80/v2-ba7d4a2b119991d9c020ad176a6180da_720w.jpg?source=1940ef5c'
        }else if(sb == 5){
            this.imgtuandui = 'https://pic1.zhimg.com/80/v2-9b9fef26cdf15886b37a937d5821c200_720w.jpg?source=1940ef5c'
        }else{
             this.imgtuandui = 'http://5b0988e595225.cdn.sohucs.com/images/20200118/54e8b93658d44207a66255b68b601e77.jpeg'
        }
      this.$notify({
        title: "邀请函",
        message: "诚挚邀请您加入我们的团队!",
        type: "warning",
      });
   var timeid = setInterval(() => {
        this.num += 0.1;
        if(this.num > 1){
            clearInterval(timeid)
        }
      }, 100);
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
    // position: fixed;
    // bottom: 0;
    // left: 0;
    width: 100%;
  padding-top: 45px;
  background: url(https://s1.ljcdn.com/feroot/pc/asset/img/home/bg-app.jpg) no-repeat
    center top;
  height: 479px;
  margin-bottom: 10px;
  margin-top: 20px;
}
.hand-lianjia {
  width: 1200px;
  margin: 0 auto;
}

.hand-lianjia .fl .download .hand-app a.android {
  margin-top: 8px;
  background-position: -20px -197px;
}

.hand-lianjia .fl .download .hand-app a.ios {
  background-position: -20px -139px;
}
.hand-lianjia .fl .download .hand-app a {
  background-image: url(https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new.png);
  background-image: -webkit-image-set(url(https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new.png) 1x, url(https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new@2x.png) 2x);
  display: inline-block;
  width: 134px;
  height: 44px;
}
a {
  text-decoration: none;
  outline: none;
}

.hand-lianjia .fl .download {
  width: 479px;
  margin-top: 38px;
  position: relative;
}
.hand-lianjia .fl .download .hand-app a {
  background-image: url(https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new.png);
  background-image: -webkit-image-set(url(https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new.png) 1x, url(https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new@2x.png) 2x);
  display: inline-block;
  width: 134px;
  height: 44px;
}
.hand-lianjia .fl {
  width: 479px;
  padding-top: 40px;
  float: left;
}

.hand-lianjia .fl .download .hand-app {
  float: left;
  width: 134px;
  margin-right: 14px;
}

.hand-lianjia .fl .titles {
    background: url(https://pic1.zhimg.com/80/v2-52f48488c5facb7b61cbda8bdc554a6e_720w.jpg?source=1940ef5c) center top;
  opacity: 0;
 background-size: cover;
  width: 286px;
  height: 118px;
}

.hand-lianjia .fl p {
  line-height: 22px;
  margin-top: 22px;
}
.hand-lianjia img {
  border: 0;
  vertical-align: top;
}

.hand-lianjia .fl .download .erweima {
  float: left;
  position: absolute;
  left: 150px;
  top: -15px;
  width: 102px;
  height: 102px;
}

.right .f-title {
  position: relative;
  height: 75px;
  line-height: 75px;
  margin: 0;
  ul {
    position: absolute;
    left: 0;
    top: -35px;
    border: 1px solid rgba(242, 242, 242, 0.144);
    border-radius: 30px;
    list-style: none;
    display: flex;
    a {
        cursor: pointer;
      color: #000;
      padding: 20px;
      border-right: 1px solid rgba(242, 242, 242, 0.9);
    }
    .last{
         border-right: 0;
    }
  }
}
</style>